import React, { Fragment, memo ,useEffect } from 'react'
import { useDispatch,useSelector,shallowEqual } from "react-redux";
import "./index.scss";

import action from "store/action/recommend";
import * as TYPES from "store/action-types";

import WYThemeHeaderRCM from "components/theme-header-rcm";
import WYTopRanking from "components/top-ranking";

export default memo(function WYRecommendRanking(props) {

    // redux 
    const dispatch = useDispatch();
    const upRanking  = useSelector(state=>(state.getIn(['recommend','upRanking'])),shallowEqual)
    const newRanking  = useSelector(state=>(state.getIn(['recommend','newRanking'])),shallowEqual)
    const originRanking  = useSelector(state=>(state.getIn(['recommend','originRanking'])),shallowEqual)
    // console.log(upRanking)

    useEffect(() => {
        dispatch(action.getTopList({type:TYPES.UP_RANKING,data:{idx:0}}))
        dispatch(action.getTopList({type:TYPES.NEW_RANKING,data:{idx:1}}))
        dispatch(action.getTopList({type:TYPES.ORIGIN_RANKING,data:{idx:3}}))
    }, [dispatch])


    return (
        <Fragment>
            <WYThemeHeaderRCM title='榜单'/>
            <div className='recommend-rank'>
                <WYTopRanking info={upRanking}/>
                <WYTopRanking info={newRanking}/>
                <WYTopRanking info={originRanking}/>
            </div>
        </Fragment>
    )
})